<template>
    <div class="slider-box">
        <my-chart :list1="yList" :date-list="dateList"></my-chart>
        <div class="play-bar">
            <el-icon size="25">
                <Refresh @click="reset" />
            </el-icon>
            <el-icon size="25" v-if="playStatus">
                <VideoPause @click="videoPause" />
            </el-icon>
            <el-icon size="25" v-else>
                <VideoPlay @click="videoPlay" />
            </el-icon>
        </div>
        <el-slider v-model="progress" :min="range[0]" :max="range[1]" />
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import myChart from '@/views/scroll/myChart.vue';
import { dateList, list } from '@/views/scroll/myChart';
const progress = ref(0)
const playStatus = ref(false) // 播放状态

let yList: number[] = reactive([]) // 数据列表

let totalTime = ref(20000) // 播放总时长 
let totalData = ref(list.length) // 总数据量

let range = ref([0, totalData.value]) // 滑块取值范围
let interval: any = null // 定时器

const videoPlay = () => { // 播放视频
    playStatus.value = true
    interval = setInterval(() => {
        progress.value++
        if (progress.value > list.length) {
            videoPause()
        }
    }, totalTime.value / totalData.value)
}

const videoPause = () => { // 暂停视频 
    playStatus.value = false
    clearInterval(interval)
}

const reset = () => { // 重置
    progress.value = 0
    yList.length = 0
    videoPause()
}
const resetYList = (val: number) => {
    yList = list.slice(0, val)
}
watch(() => progress.value, (val) => {
    resetYList(val)
})
</script>

<style lang="scss" scoped>
.slider-box {
    background-color: white;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    .play-bar {
        width: 65px;
        cursor: pointer;
    }

    :deep(.el-slider) {
        flex: 1;
        margin-right: 30px;

        .el-slider__runway {
            height: 15px;
            border-radius: 8px;
        }

        .el-slider__bar {
            height: 15px;
            border-radius: 8px;
        }

        .el-slider__button-wrapper {
            left: 0%;
            top: -11px;
        }
    }
}
</style>